<template>
  <div class="feedback">
    <!--nav-->
    <div class="Nav">
      <Nav></Nav>
    </div>
    <!--/nav-->

    <div class="content">
      <div class="title" style="margin-top: 10px">
        <i class="el-icon-edit-outline" style="color: skyblue"></i>
        <span style="font-size: 15px;color: gray">意见反馈</span>
      </div>
      <el-divider></el-divider>
      <div class="form" style="border-radius: 5px;width: 860px;height: 410px;background-color: rgba(228,228,228,0.94);margin-left: 50px;padding: 20px">
        <div class="form_content" style="border-radius: 5px;width: 860px;height: 380px;background-color: white;padding-top: 20px">
          <el-form  ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <!--title-->
            <el-form-item label="反馈主题：" prop="name">
              <el-input  placeholder="请输入主题" v-model="Feedback.title" maxlength="10" style="width: 700px" show-word-limit></el-input>
            </el-form-item>
          <!--content-->
            <el-form-item label="问题描述：" prop="desc">
              <el-input  :rows="8" style="width: 700px" v-model="Feedback.feedback" placeholder="请输入内容"  type="textarea" maxlength="100"  show-word-limit></el-input>
            </el-form-item>
          <!--btn-->
            <el-form-item>
              <el-button type="primary" @click="toSubmit()">提交</el-button>
              <el-button @click="toClear()">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>

    <!--Footer-->
    <div class="footer">
      <Footer></Footer>
    </div>
    <!--/Footer-->

  </div>
</template>

<script>
  import Nav from "../components/Nav";
  import Footer from "../components/Footer";

  export default {
    name: "Hall",
    data(){
      return{
          Feedback:{
            userId:'',
            title:'',
            feedback:'',
            createTime:''
          },
      }
    },
    methods:{

      toClear(){
        this.Feedback.title=''
        this.Feedback.feedback=''
      },
      toSubmit: function () {
        let name = localStorage.getItem("name");
        let id = localStorage.getItem("id");
        if(name==null){alert("账号未登录！请登录后操作！");return false}
        let _this = this;
        if(!this.Feedback.title){alert("请输入主题！");return false}
        if(!this.Feedback.feedback){alert("请输入内容！");return false}
        this.Feedback.userId = id
        console.log(this.Feedback)
        this.$axios.post("http://localhost:8088/feedback/setFeedback",this.Feedback).then(function () {
          //清空本次保存数据
          alert("反馈成功！请等待回复！")
          _this.Feedback = {};
          // location. reload()
        }).catch(function (err) {
          alert("反馈失败，请稍后再试")
        })
      },

    },
    components:{
      Nav,
      Footer
    }
  }
</script>

<style scoped>
  .content{
    padding: 10px;
    border-radius: 5px;
    width: 1000px;
    height: 600px;
    background-color: white;
    margin-top: 20px;
    margin-left: 270px;
    margin-bottom: 10px;
  }
  .feedback{
    width: 100%;
    height: 700px;
    background-color: rgba(238,236,237,0.94);
  }
</style>
